<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>OA-app Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<head>
    <style>
        html {
            touch-action: none;
            -ms-touch-action: none;
        }


    </style>
</head>
<body>
<div id="app">
    <div class="oa-tab-scroll">
        <div class="oa-slide ">
            <div :class="selectIndex==0? 'tabActive':'tabNo'" @click="selectIndex=0;">标签一</div>
            <div :class="selectIndex==1? 'tabActive':'tabNo'" @click="selectIndex=1;">标签二</div>
            <div :class="selectIndex==2?'tabActive':'tabNo'" @click="selectIndex=2;">标签三</div>
            <div :class="selectIndex==3? 'tabActive':'tabNo'" @click="selectIndex=3;">标签四</div>
            <div :class="selectIndex==4? 'tabActive':'tabNo'" @click="selectIndex=4;">标签五</div>
        </div>
    </div>
    <div  id="oa-wrapper" v-scroll>
        <div id="oa-scroller">
            <div id="pullDown" class="">
                <div class="pullDownLabel"></div>
            </div>
            <div class="pulldown-tips"><i></i>下拉刷新</div>
            <table class="oa-table ">
                <thead>
                <tr class="oa-table-title-gray">
                    <th style="width:35px;">序号</th>
                    <th style="width: 100px">超出隐藏</th>
                    <th style="text-align: left">俩行显示</th>
                    <th style="width: 50px">创建人</th>
                    <th style="width: 50px">操作</th>
                </tr>
                </thead>
            </table>
            <table class="oa-table">
                <tbody>
                <tr class="oa-lineTwo-H" v-for="(item,i) in num" >
                    <td style="width:35px;">1</td>
                    <td style="width: 100px" class="oa-lineOne" @click.stop="showMore($event.target)">(注：需指定宽度) 内容内容内容内容内容内容内容内容内容内容内容内容</td>
                    <td  style="text-align: left" ><div class="oa-lineTwo" @click.stop="showMore($event.target)">默认设置在36行高下俩行显示。其他行高应用场景（设置max-height为总高度，设置line-height为单行高度，需加'!important'）</div></td>
                    <td style="width: 50px"><div class="oa-name">李冰</div></td>
                    <td style="width: 50px" class="oaColor">确定</td>
                </tr>
                </tbody>
            </table>
            <div id="pullUp" class="">
                <div class="pullUpLabel">加载更多</div>
            </div>
        </div>
    </div>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/plugins/scroll/iscroll-probe.js"></script>
<script src="/dist/js/newOaApp.js"></script>

<script>
    Vue.directive('scroll', {
        inserted: function (el, binding, vnode) {
            console.log("1")
            var myScroll,
                pullDown = document.getElementById('pullDown'),
                pullUp = document.getElementById('pullUp'),
                pullDownLabel = document.querySelector('.pullDownLabel'),
                pullUpLabel = document.querySelector('.pullUpLabel'),
                loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
            pullDown.style.display='none';
            pullUp.style.display='none';
            console.log(pullDownLabel)
            myScroll = new IScroll("#oa-wrapper", {
                scrollbars: true,
                mouseWheel: false,
                interactiveScrollbars: true,
                shrinkScrollbars: 'scale',
                fadeScrollbars: true,
                scrollY: true,
                probeType: 2,
                bindToWrapper: true
            });
            myScroll.on("scroll", function() {

                if(loadingStep == 0 && (!pullDown.className||(pullDown.className.indexOf('refresh') !== -1&&pullDown.className.indexOf('loading') !== -1))) {
                    if(this.y > 40) { //下拉刷新操作
                        document.querySelector('.pulldown-tips').style.display='none';
                        addClass(pullDown,"refresh");
                        pullDown.style.display='block';
                        pullDownLabel.innerHTML="<i></i>松手刷新数据";
                        loadingStep = 1;
                        myScroll.refresh();
                    } else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多
                        addClass(pullUp,"refresh");
                        pullUp.style.display='block';
                        pullUpLabel.innerText="正在载入";
                        loadingStep = 1;
                        pullUpAction();
                    }
                }
            });
            myScroll.on("scrollEnd", function() {
                if(loadingStep == 1) {
                    if(pullDown.className&&pullDown.className.indexOf('refresh')>-1) { //下拉刷新操作
                        removeClass(pullDown,"refresh")
                        addClass(pullDown,"loading");
                        pullDownLabel.innerText="正在刷新";
                        loadingStep = 2;
                        pullDownAction();
                    }
                }
            });

            function pullDownAction() {
                console.log("下拉刷新！ 函数写")
                setTimeout(function() {
                    pullDown.className=''
                    pullDown.style.display='none';
                    myScroll.refresh();
                    loadingStep = 0;
                    document.querySelector('.pulldown-tips').style.display='block';
                }, 1000);
            }

            function pullUpAction() {
                console.log("上来加载！")
                setTimeout(function() {
                    pullUp.className=''
                    pullUp.style.display='none';
                    myScroll.refresh();
                    loadingStep = 0;
                }, 1000);
            }
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            selectIndex:0,
            num:36
        },
        methods: {
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if(mydiv.offsetParent === null){
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop+el.getBoundingClientRect().top + el.offsetHeight + "px")
                    }else{
                        mydiv.style.display = 'none';
                    }

                }else{
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            }
        }
    })

</script>
<script type="text/javascript">

</script>
</body>
</html>